<template>
  <div class="y-tabs">
    <el-tabs v-model="model" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) of optionsList"
        :key="index"
        :label="item.label"
        :name="item.name"
      ></el-tab-pane>
    </el-tabs>
    <div class="component-content">
      <keep-alive v-if="isComponent.isKeepAlive">
        <component v-on="$listeners" :is="isComponent.component"></component>
      </keep-alive>
      <component v-bind="$attrs" v-on="$listeners" v-else :is="isComponent.component"></component>
    </div>
  </div>
</template>
<script>
export default {
  model: {
    prop: "activeName",
    event: "input",
  },
  props: {
    optionsList: {
      type: Array,
      default: () => {},
      required: true,
    },
    activeName: {
      type: String,
      default: "",
    },
  },
  name: "yTabs",
  computed: {
    model: {
      get() {
        return this.activeName;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
    isComponent() {
      let selectTab = this.optionsList.find((item) => item.name === this.model);
      return selectTab || {};
    },
  },
  methods: {
    handleClick(tab, nav) {
      this.$emit("handleClick", { tab, nav });
    },
  },
};
</script>

<style lang="scss" scoped>
.y-tabs {
  width: 100%;
  height: 100%;
  .component-content {
    width: 100%;
    height: calc(100% - 54px);
  }
}
</style>